<template>
  <div>
    <slot></slot>
    <el-input
      v-model="password"
      :placeholder="placeholderContent"
      :type="setPass"
      @change="passwordChange"
      class="password_input"
    >
      <img
        src="@/assets/img/aclose.png"
        slot="suffix"
        @click="handleIconClick"
        class="close_icon"
        v-show="setPass == 'password'"
      />
      <img
        src="@/assets/img/accopen.png"
        slot="suffix"
        @click="handleIconClick"
        v-show="setPass == 'text'"
        class="close_icon"
      />
    </el-input>
  </div>
</template>

<script>
export default {
  props: {
    placeholderContent: String
  },
  data() {
    return {
      password: "",
      setPass: "password"
    };
  },
  mounted() {
  },
  methods: {
    // 显示密码和隐藏密码
    handleIconClick() {
      if (this.setPass == "password") {
        this.setPass = "text";
      } else this.setPass = "password";
    },
    // 密码改变传值到外面
    passwordChange(val) {
      this.$emit("passwordChange", val)
    }
  },
};
</script>

<style lang="less">
  .password_input {
    font-size: 12px;
    border: 1px solid @fbSix;
    border-radius: 4px;
    .el-input__inner:-moz-placeholder {
      color: @fbSix;
    }

    .el-input__inner::-moz-placeholder {
      color: @fbSix;
    }

    .el-input__inner:-ms-input-placeholder {
      color: @fbSix;
    }

    .el-input__inner::-webkit-input-placeholder {
      color: @fbSix;
    }
    .close_icon {
      height: 22px;
      margin-top: 10px;
    }
  }
</style>